<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Ajax</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }

        ul {
            margin: 0;
            padding: 50px;
            list-style: none;
        }

        .register {
            width: 800px;
            margin: 50px auto;
            background-color: #FFF;
            border: 1px solid #CCC;
            border-radius: 5px;
        }

        li {
            display: flex;
            margin: 20px 0;
        }

        label, input {
            display: block;
            float: left;
            height: 46px;
            font-size: 24px;
            box-sizing: border-box;
            color: #333;
        }

        label {
            width: 200px;
            line-height: 46px;
            margin-right: 30px;
            text-align: right;
        }

        input {
            width: 320px;
            padding: 8px;
            line-height: 1;
            outline: none;
            position: relative;
        }

        input.code {
            width: 120px;
        }

        input.verify {
            width: 190px;
            margin-left: 10px;
        }

        input.disabled {
            background-color: #CCC !important;
        }

        input[type=button] {
            border: none;
            color: #FFF;
            background-color: #E64145;
            border-radius: 4px;
            cursor: pointer;
        }

        .tips {
            position: fixed;
            top: 0;
            width: 100%;
            height: 40px;
            text-align: center;
        }

        .tips p {
            min-width: 300px;
            max-width: 400px;
            line-height: 40px;
            margin: 0 auto;
            color: #FFF;
            display: none;
            background-color: #C91623;
        }
    </style>
</head>
<body>
<div class="register">
    <form id="ajaxForm">
        <ul>
            <li>
                <label for="">用户名</label>
                <input type="text" name="name" class="name">
            </li>
            <li>
                <label for="">请设置密码</label>
                <input type="password" name="pass" class="pass">
            </li>
            <li>
                <label for="">请确认密码</label>
                <input type="password" name="repass" class="repass">
            </li>
            <li>
                <label for="">验证手机</label>
                <input type="text" name="mobile" class="mobile">
            </li>
            <li>
                <label for="">短信验证码</label>
                <input type="text" name="code" class="code">
                <input type="button" value="获取验证码" class="verify">
            </li>
            <li>
                <label for=""></label>
                <input type="button" class="submit" value="立即注册">
            </li>
        </ul>
    </form>
</div>
<!-- 提示信息 -->
<div class="tips">
    <p>用户名不能为空</p>
</div>
<script src="./js/jquery.min.js"></script>
<script>
    // 提交的
    $('.submit').on('click', function () {
        // 可以叫self，目的是缓存外部this
        var _this = $(this);
        // 禁止重复提交
        if (_this.hasClass('disabled')) return;
        // serialize()
        var formData = $('#ajaxForm').serialize();
        // console.log(formData);
        // 发送请求
        $.ajax({
            type: 'post',
//            url: 'register.php',
            data: formData,
            // 发送请求前
            beforeSend: function () {
                // 做验证
                // 验证用户名
                if ($('.pass').val() == '') {
                    $('.tips p').stop(true, true).fadeIn(400)
                            .delay(1500).fadeOut(400).text('用户名不能为空');
                    // 可以终止请求
                    return false;
                }
                // 改变状态
                _this.addClass('disabled');
                _this.val('正在提交...');
                // 还可以验证密码和手机验证码
            },
            success: function (data) {
                console.log(data)
            },
            error: function () {
                //
            },
            complete: function () {
                // 恢复初始状态
                _this.removeClass('disabled');
                _this.val('立即注册');
            }
        });
    });
    // 获取验证码
    $('.verify').on('click', function () {
        var _this = $(this);
        // 禁止重复提交
        if (_this.is('.disabled')) return;
        _this.addClass('disabled');
        var mobile = $('.mobile').val();
        $.ajax({
            type: 'post',
//            url: 'getCode.php',
            data: {mobile: mobile},
            timeout: 2000,
            beforeSend: function () {
                // 验证手机号
                var regMoble = /1\d{10}/;
                if (!regMoble.test($('.mobile').val())) {
                    $('.tips p').stop(true, true).fadeIn(400)
                            .delay(1500).fadeOut(400).text('手机格式不正确');
                    // 终止请求
                    return false;
                } else {
                    setTimeout(function () {
                        $(".code").val("342146")
                    }, 3000)
                }
                var seconds = 10;
                var t = setInterval(function () {
                    _this.val(--seconds + '秒后重新获取');
                    if (seconds <= 0) {
                        // 清除定时器
                        clearInterval(t);
                        _this.val('获取验证码').removeClass('disabled');
                    }
                }, 1000);
            },
            success: function (data) {
                console.log(data);
            },
            error: function () {
            },
            complete: function () {
                console.log('complete');
            }
            // success error 会优先于 complete
        });
    });
    // 全局设置
    $.ajaxSetup({
        // 设置超时
        timeout: 3000
    });
    // 也可以单独设，但单独设地优先级高
</script>
</body>
</html>